import { defineComponent } from 'vue';
import styles from './index.module.scss';
import LoginForm from './LoginForm';
export default defineComponent({
  name: 'Login',
  setup() {
    return () => (
      <>
        <span class="-enter-x xl:hidden">
          <div
            class={[
              styles.logo,
              'flex',
              'absolute text-white align px-5 py-5 font font-medium',
              '-enter-x',
            ]}
          >
            <img src="/vite.svg" alt="" />
            <div>Vue3 Tsx Admin</div>
          </div>
        </span>
        <div class={[styles.container, 'h-full', 'w-full', 'px-4']}>
          <div class={['container', 'relative', 'h-full', 'py-2', 'mx-auto', 'sm:px-10']}>
            <div class={['h-full', 'flex']}>
              <div
                class={[
                  'text-white hidden',
                  'mt-5',
                  'xl:flex',
                  'xl:flex-col',
                  'font-normal',
                  'xl:w-6/12',
                ]}
              >
                <div class={[styles.logo, 'flex', 'absolute', '-enter-x']}>
                  <img src="/vite.svg" alt="" />
                  <div class={styles.logo_title}>Vue3 Tsx Admin</div>
                </div>
                <div class={styles.my_auto}>
                  <img
                    src="/src/assets/login-box-bg.svg"
                    alt=""
                    class={['w-1/2', '-mt-16', 'mb-16', '-enter-x']}
                  />
                  <div class={['font-medium', 'text-white', 'text-3xl', '-enter-x']}>
                    tsx实现的后台管理系统
                  </div>
                  <div class={['mt-4', 'font-normal', 'text-white', '-enter-x']}>
                    欢迎大家点评使用
                  </div>
                </div>
              </div>
              <div class="flex font-normal xl:w-6/12 w-full h-full">
                <LoginForm></LoginForm>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  },
});
